<template>
    <div>
        <div class="content">
            <indexHeader :baseInfo="baseInfo" />
            <div class="container">
                <div class="zhong mt-30">
                    <div class="left">
                        <search />
                    </div>

                    <div class="right">
                        <hotBiaoxun :list="hotBxList" />
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <main-nav />
            <div class="mb-30">
                <indexCategory />
            </div>
        </div>
        <float-side />
        <footers :baseInfo="baseInfo" />
        <!-- 登录弹窗 -->
        <auth-modal></auth-modal>
        <!-- 意见反馈弹窗 -->
        <feedback-modal></feedback-modal>
        <!-- 一键举报弹窗 -->
        <report-modal></report-modal>
    </div>
</template>

<script>
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex'
import indexHeader from "@/components/indexHeader.vue"
import mainNav from "@/components/mainNav.vue"
import footers from "@/components/footer.vue"
import floatSide from "@/components/floatSide.vue"
import indexCategory from "./components/indexCategory.vue"
import hotBiaoxun from "./components/hotBiaoxun.vue"
import search from "./components/search.vue"
import { getBxList } from "@/api/biaoxun"
import { getBase } from "@/api/base"
import router from "../router"
export default {
    name: "Home",
    components: {
        indexHeader,
        mainNav,
        footers,
        floatSide,
        indexCategory,
        hotBiaoxun,
        search
    },
    computed: {
        ...mapGetters(['isLogin'])
    },
    data () {
        return {
            hotBxList: [],
            baseInfo: {}
        }
    },
    mounted () {
        //this.getBxList()
        //this.getBaseInfo()

    },
    methods: {
        tabs (e) {
            if (e == "remen") {
                this.$router.push({
                    name: "beacon"
                })
            }
        },
        async getBaseInfo () {
            const res = await getBase()
            this.baseInfo = res.data.data
        },
        async getBxList () {
            const res = await getBxList()
            this.hotBxList = res.data.data.list.splice(0, 6)
        }
    }
}
</script>

<style lang="less" scoped>
.content {
    background-image: url("../assets/img/3.png");
    height: 510px;
    background-size: 100% 100%;
    width: 100%;
}

.zhong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    .left {
        background: rgba(46, 48, 51, 0.1);
        border-radius: 10px;
        padding: 31px 30px 85px 30px;
        margin-right: 30px;
        flex: 1;
    }

    .right {
        background: rgba(46, 48, 51, 0.1);
        border-radius: 10px;
        padding: 29px 15px 10px;
        flex: 1;
        margin-left: 30px;
        height: 360px;


    }
}
</style>